import { EventColors } from '@shared/types/eventColors'
import { IconFont, IconName } from '@shared/ui/IconFont'
import classNames from 'classnames'
import { MouseEvent } from 'react'
import styles from './IconButton.module.scss'

type IconButtonSize = 'large' | 'medium' | 'small'
type IconButtonForm = 'circle' | 'rounded' | 'square'
export interface IconButtonProps {
  className?: string
  form?: IconButtonForm
  iconName: IconName
  onClick?: (e: MouseEvent) => void
  size?: IconButtonSize
  style?: EventColors
  withoutBorder?: boolean
}

export const IconButton = ({
  className,
  form = 'rounded',
  iconName,
  onClick,
  size = 'small',
  style = 'primary',
  withoutBorder,
}: IconButtonProps) => {
  const btnStyle = withoutBorder ? 'default' : style
  const allStyles = classNames(
    styles['icon-btn'],
    styles[btnStyle],
    styles[size],
    styles[form],
    { [styles['without-border']]: withoutBorder },
    className,
  )

  return (
    <button className={allStyles} onClick={onClick}>
      <IconFont className={styles.icon} iconName={iconName} />
    </button>
  )
}

IconButton.displayname = 'IconButton'
